<template>
  <div class="admin-module">
    <el-table
        :data="quartzInfo.quartzList"
        border stripe
        :header-cell-style="tableHeaderStyle()"
        :cell-style="tableCellStyle()"
        :row-style="tableRowStyle()"
        style="width: 100%"
        class="card-item">
      <el-table-column type="index" align="center" width="50" />
      <el-table-column prop="group" label="任务组别" align="center" min-width="20%"/>
      <el-table-column label="任务类型" align="center" min-width="20%">
        <template #default="scope">
          <el-tag v-if="scope.row.type === 'EMAIL'" type="success">邮件提醒</el-tag>
          <el-tag v-else type="danger">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="任务内容" align="center"/>
      <el-table-column label="执行时间" align="center" width="200">
        <template #default="scope">
          {{ scope.row.executeTime }}
        </template>
      </el-table-column>
      <el-table-column label="任务状态" align="center" min-width="20%">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 'NONE'" type="danger">不存在</el-tag>
          <el-tag v-else-if="scope.row.status === 'NORMAL'" type="primary">正常执行</el-tag>
          <el-tag v-else-if="scope.row.status === 'PAUSED'" type="warning">暂停</el-tag>
          <el-tag v-else-if="scope.row.status === 'COMPLETE'" type="success">完成</el-tag>
          <el-tag v-else-if="scope.row.status === 'ERROR'" type="danger">执行出错</el-tag>
          <el-tag v-else-if="scope.row.status === 'BLOCKED'" type="danger">阻塞</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
import { IQuartzInfo } from '@/types/quartz'
import { queryQuartzApi } from '@/apis/quartz'

const quartzInfo = reactive({
  quartzList: [] as IQuartzInfo[]
})

onMounted(async () => {
  quartzInfo.quartzList = await queryQuartzApi()
})
</script>
